<template>
  <div
    class="main-page"
    style="min-width:1366px;"
  >
    <el-form ref="form">
      <!-- 搜索栏 -->
      <BaseSearchBar v-on:ChildSearchEvent="getSearchKeyEvent"></BaseSearchBar>
    </el-form>
    <!-- 表单 -->
    <el-card
      :body-style="{ padding: '0px' }"
      class="box-card"
    >
      <!-- <div class="SearchT">
        <div class="tableLable">数据管理列表</div>
        <el-button
          type="danger"
          class="BatchDeleBtn"
          style="width:80px"
          size="small"
        >批量删除</el-button>

        <el-button
          type="primary"
          class="exportBtn"
          style="width:80px"
          size="small"
        >导出</el-button>
      </div> -->
      <div class="tableStyle">
        <el-table
          ref="multipleTable"
          class="card-table"
          :data="KeytipList"
          tooltip-effect="dark"
          style="font-size:12px"
          :row-class-name="tableRowClassName"
          :header-cell-style="{ background: '#3F9DFD', color: '#FFF' }"
          size="medium"
          height="634px"
          border
        >

          <el-table-column
            label="序号"
            type="index"
            width="50"
          ></el-table-column>

          <el-table-column
            prop="drugCode"
            label="医院药品编码"
            show-overflow-tooltip
            width="110"
          />
          <el-table-column
            prop="drugName"
            label="医院药品名称(背景绿色表示有重点提示)"
            show-overflow-tooltip
            width="600"
          />
          <el-table-column
            label="操作"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="dialogKeyTip(scope.row.id,scope.row.drugUniqueCode)"
              >自定义重点提示</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[20 ,50 ,100]"
            :page-size="this.queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.total"
            background
          ></el-pagination>
        </div>
      </div>
    </el-card>
    <el-dialog
      title="提示"
      :visible.sync="dialogKeyTipVisible"
      width="45%"
      :before-close="handleClose"
    >
      <el-card class="dialog-card">
        <div class="Card_body">
          <BaseSearchBarItem>
            <div
              slot="lable"
              style="float: right; margin-right: 20px;"
            >医院药品名称:</div>
            <div slot="input">
              <el-input
                v-model="dialogData.drugName"
                placeholder="请输入关键字"
              />
            </div>
          </BaseSearchBarItem>
        </div>
        <div class="Card_body">
          <BaseSearchBarItem>
            <div
              slot="lable"
              style="float: right; margin-right: 20px;"
            >药品编码:</div>
            <div slot="input">
              <el-input
                v-model="dialogData.drugCode"
                placeholder="请输入关键字"
              />
            </div>
          </BaseSearchBarItem>
        </div>
      </el-card>
      <el-card
        class="dialog-card2"
        style="margin-top: 10px;"
      >
        <div
          slot="header"
          class="Card_title"
        >
          <span>重点提示(高危)</span>
        </div>
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="dialogData.highRiskText"
        ></el-input>
      </el-card>

      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="mini"
          type="danger"
          @click="dialogClearKeytip()"
        >清除重点提示</el-button>
        <el-button
          size="mini"
          type="success"
          @click="dialogEditKeytip()"
        >保存重点提示</el-button>
        <el-button
          size="mini"
          type="primary"
          @click="dialogKeyTipVisible = false"
        >关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import BaseSearchBar from "./BaseSearchBar";
import BaseSearchBarItem from "../../../components/BaseSearchBarItem";
import {
  getKeytipList,
  dialogKeytipData,
  dialogEditKeytip,
  dialogClearKeytip
} from "@/api/rad";
export default {
  name: "MainPage",
  components: {
    BaseSearchBar,
    BaseSearchBarItem
  },
  created: function() {
    this.getKeytipList();
  },
  methods: {
    // 监听pagesize改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getKeytipList();
      // console.log(newSize);
    },
    // 当前展示的页面
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage;
      // console.log(newPage);
      this.getKeytipList();
    },
    // 改变颜色
    tableRowClassName({ row, rowIndex }) {
      console.log(row.highRisk);
      // console.log(rowIndex)
      if (row.highRisk == 1) {
        return "warning-row";
      }
      return "";
    },
    handleClose(done) {
      done();
    },
    async getKeytipList() {
      let _this = this;
      let res = await this.$rad.getKeytipList({
        srm: _this.queryInfo.srm,
        drugNameType: _this.queryInfo.drugNameType,
        highRisk: _this.queryInfo.highRisk,
        page: _this.queryInfo.page,
        pageSize: _this.queryInfo.pageSize
      });
      this.KeytipList = res.rows;
      this.total = res.total;
      console.log(res);
    },
    getSearchKeyEvent(data) {
      (this.queryInfo.srm = data.srm),
        (this.queryInfo.drugNameType = data.drugNameType),
        (this.queryInfo.highRisk = data.highRisk),
        this.getKeytipList();
    },
    async dialogKeyTip(id, drugUniqueCode) {
      this.dialogData.id = id;
      this.dialogData.drugUniqueCode = drugUniqueCode;
      let res = await this.$rad.dialogKeytipData({
        drugUniqueCode: drugUniqueCode
      });
      console.log(res);
      this.dialogData.drugName = res.drugName;
      this.dialogData.drugCode = res.drugCode;
      this.dialogData.highRiskText = res.highRiskText;
      this.dialogKeyTipVisible = true;
    },
    async dialogEditKeytip() {
      let res = await this.$rad.dialogEditKeytip({
        drugUniqueCode: this.dialogData.drugUniqueCode,
        highRiskText: this.dialogData.highRiskText
      });
      console.log(res);
      if (res.code == 1) {
        this.$message.success(res.msg);
        this.getKeytipList();
        this.dialogKeyTipVisible = false;
      } else {
        this.$message.error(res.msg);
      }
    },
    async dialogClearKeytip() {
      let res = await this.$rad.dialogClearKeytip({
        drugUniqueCode: this.dialogData.drugUniqueCode
      });
      console.log(res);
      if (res.code == 1) {
        this.$message.success(res.msg);
        this.getKeytipList();
        this.dialogKeyTipVisible = false;
      } else {
        this.$message.error(res.msg);
      }
    }
  },
  data() {
    return {
      SearchKey: "",
      // 列表的参数对象
      queryInfo: {
        srm: "",
        // 当前的页数
        drugNameType: "",
        highRisk: "",
        page: 1,
        // 当前页显示多少数据
        pageSize: 20
      },
      //dialog
      dialogKeyTipVisible: false,

      KeytipList: [],
      total: 0,
      dialogData: {
        id: "",
        drugUniqueCode: "",
        drugName: "",
        drugCode: "",
        highRiskText: ""
      }
    };
  }
};
</script>
<style>
.el-table .warning-row {
  background: #40e0d0 !important;
}
</style>
<style scoped>
.el-card {
  margin-left: 3px;
}
.SearchT {
  display: flex;
  justify-content: flex-end;
  height: 50px;
  align-items: center;
  background-color: #e6edf3;
  font-size: 14px;
}
.tableLable {
  flex: 1;
  text-align: left;
  margin-left: 15px;
  letter-spacing: 2px;
  font-size: 14px;
  color: #32a6f3;
  font-weight: bold;
}
.exportBtn {
  margin-right: 23px;
}
.BatchDeleBtn {
  margin-right: 15px;
}
.tableStyle {
  width: 100%;
  height: 100%;
}
.card-table {
  width: 100%;
  height: 75%;
}
.block {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 12px;
}
.el-textarea >>> .el-textarea__inner {
  height: 250px;
}
/* dialog样式 */
.dialog-card >>> .el-card__body {
  padding: 0px 0px;
  width: 100%;
  height: 50px;
  display: flex;
  flex: 1;
  /* background-color: red; */
}

.dialog-card >>> .Card_body {
  width: 50%;
  /* margin-left: 15px; */
  margin-right: 15px;
}
.dialog-card2 >>> .el-card__header {
  padding: 10px 10px;
}
</style>
